{% extends "app/base_site.html" %}

{% block title %} 布控管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}

  <div class="right_col" role="main">
    <div class="">
      <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>布控管理
             <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
             <span id="top_msg">{{top_msg}}</span>
          </h2>

            <button style="margin-left:10px;"  onclick="f_postAllStart()" class="btn btn-primary btn-sm"><i class="fa fa-hand-o-right"></i> 全部加入布控</button>

          <div class="clearfix"></div>
        </div>

        <div class="x_content">
          <!--<p><code>msg</code></p>-->

          <div class="table-responsive">
           <table class="table table-bordered">
              <thead>
                <tr class="headings">
                  <th class="column-title">ID </th>
                  <th class="column-title">编号 </th>
                  <th class="column-title">视频流 <i class="bxc_introduce fa fa-info-circle" title="离线的视频流无法布控"></i></th>
                  <th class="column-title">算法处理实时流 <i class="bxc_introduce fa fa-info-circle" title="算法处理实时流在布控时才能查看（且需要勾选推流选项）"></i></th>
                  <th class="column-title">算法 </th>
                  <th class="column-title">计算频率 </th>
                  <th class="column-title">状态 <i class="bxc_introduce fa fa-info-circle" title="布控实时状态"></i></th>
                  <th class="column-title">时间 </th>
                  <th class="column-title no-link last"><span class="nobr">操作</span></th>
                </tr>
              </thead>

              <tbody id="data">
              </tbody>
            </table>
          </div>


        </div>


             <!--日志弹窗start -->
                  <div id="controlLogDialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">

                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                          <h4 class="modal-title" >布控日志</h4>
                      </div>
                      <div class="modal-body">
                        <div style="padding: 5px 20px;">
                          <table class="table table-striped">
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>日志内容</th>

                                <th>时间</th>
                              </tr>
                            </thead>
                            <tbody id="controlLogData">
                              <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>@mdo</td>
                              </tr>
                              <tr>
                                <th scope="row">2</th>
                                <td>Thornton</td>
                                <td>@fat</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              <!--日志弹窗end -->
      </div>
    </div>

      </div>
    </div>
  </div>

{% endblock content %}

{% block javascripts %}
  {{ block.super }}

<script>

    let eleData = $("#data");
    let ele_top_loading = $("#top_loading");
    let ele_top_msg= $("#top_msg");

    let eleControlLogDialog = $("#controlLogDialog");
    let eleControlLogData = $("#controlLogData");

    function f_edit(controlCode) {
        let url = "/control/edit?code="+controlCode;
        window.location.href = url;
    }
    function f_del(controlCode) {
        ele_top_loading.show();
        $.ajax({
               url: '/control/postDel',
               type: "post",
               async: true,
               data: {"controlCode":controlCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                      ele_top_loading.hide();
                   if(1000 === res.code){
                       f_getIndex(false);
                   }else{
                        myAlert(res.msg,"error");
                   }
               }
            });

    }
    function f_copy(controlCode) {
        ele_top_loading.show();
        $.ajax({
               url: '/control/postCopy',
               type: "post",
               async: true,
               data: {"controlCode":controlCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                      ele_top_loading.hide();
                   if(1000 === res.code){
                       f_getIndex(false);
                   }else{
                        myAlert(res.msg,"error");
                   }
               }
            });

    }
    function f_log(controlCode) {
        // BootStrap弹窗说明：https://www.genban.org/teach/teach-28585.html
        // data-toggle='modal' data-target='#controlLogDialog'

            ele_top_loading.show();
            $.ajax({
                   url: '/control/getLog',
                   type: "get",
                   async: true,
                   data: {"controlCode":controlCode},
                   dataType: "json",
                   timeout: 0,
                   error: function () {
                       ele_top_loading.hide();
                       myAlert("网络异常，请确定网络正常！","error");
                   },
                   success: function (res) {
                       ele_top_loading.hide();

                       let item_html;
                        eleControlLogData.html("");

                       if(1000 === res.code){

                           let data = res.data;
                           let data_length = data.length;

                           if(0===data_length){
                               item_html = "";
                              item_html += "<tr>";
                              item_html += "<td colspan='3'>暂无日志</td>";
                              item_html += "</tr>";
                              eleControlLogData.append(item_html);
                           }else{

                               for (let i = 0; i < data_length; i++) {
                                   let d = data[i];
                                   item_html = "";

                                   item_html+="<tr>";
                                    item_html+="<th scope=\"row\">"+d["id"]+"</th>";
                                    item_html+="<td>"+d["content"]+"</td>";
                                    item_html+="<td>"+d["create_time_str"]+"</td>";
                                    item_html+="</tr>";
                                    eleControlLogData.append(item_html);
                               }

                           }
                       }else{
                            myAlert(res.msg,"error");
                       }

                    }
                });

        let html = "";



        eleControlLogData.html(html);
        eleControlLogDialog.modal("toggle");
        //$("#controlLogDialog").modal("show");
        //$("#controlLogDialog").modal("hide");

    }

    function f_open_player(stream_app,stream_name){
        window.open("/stream/player?app="+stream_app+"&name="+stream_name);
    }
    function f_open_algorithm(code) {
        let url = "/algorithm/edit?code="+code;
        window.open(url);
    }
    function f_open_behaviour(code) {
        let url = "/behaviour/edit?code="+code;
        window.open(url);
    }
    function f_getIndex(is_auto_refresh = false) {
        ele_top_loading.show();
        $.ajax({
               url: '/control/getIndex',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   ele_top_loading.hide();
                   let top_msg = res.top_msg;
                   ele_top_msg.html(top_msg);

                     eleData.html("");
                    let item_html;

                   if(1000 === res.code){

                       let data = res.data;
                       let data_length = data.length;

                       if(0===data_length){
                           item_html = "";
                          item_html += "<tr class=\"even pointer\">";
                          item_html += "<td colspan='10'>暂无数据</td>";
                          item_html += "</tr>";
                          eleData.append(item_html);
                       }else{

                            for (let i = 0; i < data_length; i++) {
                               let d = data[i];
                               item_html = "";
                               item_html += "<tr class=\"even pointer\">";
                               item_html += "<td>"+d["id"]+"</td>";
                               item_html += "<td>"+d["code"]+"</td>";

                               if(d["stream_active"]){
                                  item_html += "<td><span class='sun-state-success'>在线</span><a class='sun-a-label' href=\"javascript:f_open_player('"+d["stream_app"]+"','"+d["stream_name"]+"')\" >"+
                                                d["stream_nickname"]+"</a></td>";
                               }else{
                                  item_html += "<td><span class='sun-state-error'>离线</span> "+d["stream_nickname"]+"</td>";
                                }

                               if(0===d["push_stream"]){
                                   item_html += "<td><span class='sun-state-error'>未开启推流</span></td>";
                               }else{
                                   item_html += "<td><a class='sun-a-label' href=\"javascript:f_open_player('"+d["push_stream_app"]+"','"+d["push_stream_name"]+"')\" >"+
                                                "播放实时流"+"</a></td>";
                               }

                                if(0===d["algorithm_name"]){//基础算法已被删除
                                    item_html += "<td><span class='sun-state-error'>已删除</span>";
                                    if(0===d["behaviour_name"]){
                                            item_html += " + <span class='sun-state-error'>已删除</span></td>";
                                    }else{
                                            item_html += " + <a class='sun-a-label' href=\"javascript:f_open_behaviour('"+d["behaviour_code"]+"')\" > "+ d["behaviour_name"]+"</a></td>";
                                    }

                                }else{//基础算法未被删除
                                    let algorithm_way_code = d["algorithm_way_code"];

                                    item_html += "<td><a class='sun-a-label' href=\"javascript:f_open_algorithm('"+d["algorithm_code"]+"')\" > "+d["algorithm_name"]+"</a>";

                                    if("MODEL" === algorithm_way_code){
                                        if(0===d["behaviour_name"]){
                                            item_html += " + <span class='sun-state-error'>已删除</span></td>";
                                        }else{
                                            item_html += " + <a class='sun-a-label' href=\"javascript:f_open_behaviour('"+d["behaviour_code"]+"')\" > "+ d["behaviour_name"]+"</a></td>";
                                        }
                                    }else if("API" === algorithm_way_code){
                                        item_html += "</td>";
                                    }else{//错误的way_code
                                        item_html += "</td>";
                                    }
                                }

                               item_html += "<td>"+d["checkFps"]+"</td>";

                                item_html += "<td class='cur_state_" + d["code"] + "'>";
                               if(0===d["cur_state"]){
                                   item_html += "<span class='sun-state-error'>未布控</span>";
                               }else if(1===d["cur_state"]){
                                    item_html += "<span class='sun-state-success'>布控中</span>";
                               }else if(5===d["cur_state"]){
                                    item_html += "<span class='sun-state-error'>布控中断</span>";
                               }else{
                                    item_html += "<span class='sun-state-error'>未知状态</span>";
                               }
                                item_html += "</td>";


                               item_html += "<td>"+d["last_update_time"]+"</td>";
                               item_html += "<td>";

                                if(1===d["cur_state"]) {
                                    item_html += "<button data-code='" + d["code"] + "'  data-handle='cancel' onclick=\"f_postHandleAnalyzer(this)\" class=\"btn btn-dark btn-xs\"><i class=\"fa fa-close\"></i> 取消布控</button>";
                                    item_html += "<span style='display: none;' class='menu_" + d["code"] + "'>";
                                }else{
                                    item_html += "<button data-code='" + d["code"] + "'  data-handle='add'onclick=\"f_postHandleAnalyzer(this)\"class=\"btn btn-primary btn-xs\"><i class=\"fa fa-hand-o-right\"></i> 加入布控</button>";
                                    item_html += "<span class='menu_" + d["code"] + "'>";
                                }

                                   item_html += "<a href=\"javascript:f_edit('"+d["code"]+"')\"  class='sun-a-label' ><i class=\"fa fa-edit\"></i>编辑</a>";
                                   item_html += "<a href=\"javascript:f_del('"+d["code"]+"')\"  class='sun-a-label'  ><i class=\"fa fa-remove\"></i>删除</a>";
                                   item_html += "</span>";

                           item_html += "<a href=\"javascript:f_copy('"+d["code"]+"')\" class='sun-a-label' ><i class=\"fa fa-copy\"></i>复制</a>";
                           item_html += "<a href=\"javascript:f_log('"+d["code"]+"')\" class='sun-a-label' ><i class=\"fa fa-chain\"></i>日志</a>";


                               item_html += "</td></tr>";

                               eleData.append(item_html);
                           }
                        }

                        if(is_auto_refresh){
                            setTimeout(function () {
                                f_getIndex(is_auto_refresh);
                            }, 3000);
                        }
                   }else{

                        myAlert(res.msg,"error");
                   }
               }
            });

    }
    function f_postAllStart() {
                //全部加入布控
        ele_top_loading.show();
        $.ajax({
               url: '/analyzer/postAllStart',
               type: "post",
               async: true,
               data: {"batch_state":10},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                      ele_top_loading.hide();
                    if(1000 === res.code){
                        myAlert(res.msg,"success");
                        setTimeout(function () {
                            f_getIndex(false);
                        }, 1000);
                   }else{
                        myAlert(res.msg,"error");
                   }
               }
            });
    }
    function f_postHandleAnalyzer(obj) {
        //obj.getAttribute("data-handle"); // js 获取 data-handle属性
        //obj.setAttribute("data-handle","123") // js 修改 data-handle属性
        let jqueryObj = $(obj);
        let handle = jqueryObj.data("handle");
        //jqueryObj.data("handle","123");
        let code = jqueryObj.data("code");

        let handleUrl;
        if ('add'===handle){
            handleUrl = '/analyzer/postAdd';
        }else if('cancel'===handle){
            handleUrl = '/analyzer/postCancel';
        }else{
            return;
        }
        ele_top_loading.show();
        $.ajax({
           url: handleUrl,
           type: "post",
           async: true,
           data: {"controlCode":code},
           dataType: "json",
           timeout: 0,
           error: function () {
                ele_top_loading.hide();
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               ele_top_loading.hide();
               if(1000 === res.code){
                   myAlert(res.msg,"success",1000);

                   if("add"===handle){
                       jqueryObj.removeClass("btn-primary")
                       jqueryObj.addClass("btn-dark")
                       jqueryObj.data("handle","cancel");
                       jqueryObj.html("<i class=\"fa fa-close\"></i>取消布控");

                        //布控成功
                       $(".cur_state_"+code).html("<span class='sun-state-success'>布控中</span>");
                       $(".menu_"+code).hide();

                   }else if('cancel'===handle){
                       jqueryObj.removeClass("btn-dark")
                       jqueryObj.addClass("btn-primary")
                       jqueryObj.data("handle","add");
                       jqueryObj.html("<i class=\"fa fa-hand-o-right\"></i>加入布控")
                       //取消布控成功
                       $(".cur_state_"+code).html("<span class='sun-state-error'>未布控</span>")
                       $(".menu_"+code).show();
                   }

               }else{
                   myAlert(res.msg,"error");
               }
           }
        });
    }
    window.onload = function (){
        f_getIndex(false);
    };


</script>
{% endblock javascripts %}

